import React, { Component } from 'react'

export class Items extends Component {

    state = {mouse: false};

    handleMouse = (flag) =>{
        return ()=>{
           this.setState({mouse:flag})
        }
    }

    // 勾选
    handleCheck = (id) =>{
        return (event)=>{
            console.log(id,event.target.checked)
            this.props.upDateTodo(id,event.target.checked)
        }
    }

    // 删除
    handleClick = (id) => {
        // console.log('删除 ID 的todos');
        if(window.confirm('确定删除这一项吗')){
            this.props.deleteTodo(id);
        }
    }

    render() {

        const {id,name,done} = this.props;
        const {mouse} = this.state;

        return (
            <li style={{backgroundColor: mouse ? '#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)}/>
                    <span>{name}</span>
                </label>
                <button onClick={() => this.handleClick(id) } className="btn btn-danger" style={{display: mouse ? 'inline' : 'none'}}>删除</button>
            </li>
        )
    }
}
